<template>
  <div>
    <goga-header title="支付订单">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
    </goga-header>
    <div>
      <img v-if="loading" class="gxb-loading" src="/public/images/loding.gif" alt="">
      <div>
        <div class="pay-balance">
          <div class="p-pirce">当前余额：¥{{balance}}</div>
          <router-link :to="{name:'deposit', query:{id: orderId}}"  class="link-pay">前往充值</router-link>
        </div>
      </div>
      <div @click='choose(1)'>
        <cell title='支付宝支付' v-if='!isWechat'  is-link>
          <div slot='icon' class='pay-icon zfb' is-link></div>
          <span class='pay-r' ><icon symbol="check" :class="{full:payIndex==1}"></icon></span>
        </cell>
      </div>
      <div @click='choose(2)'>
        <cell title='微信支付' v-if='isWechat' is-link>
          <div slot='icon' class='pay-icon wx'></div>
          <span class='pay-r' ><icon symbol="check" :class="{full:payIndex==2}"></icon></span>
        </cell>
      </div>
      <cell title='订单金额' class='m-04'>
        <span class='text-def'>¥{{price}}</span>
      </cell>
    </div>

    <div class='btn-bottom'>
      <button @click='pay()' class="btn" :disabled="btnDisabled"><span v-if="!btnDisabled">前往支付</span><span v-if="btnDisabled">处理中,请稍等</span></button>
    </div>

  </div>
</template>

<script lang="babel">
  import api from '@api'
  import {isWechat, cookie, wechatConfig} from '@utils'
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'
  import {mapGetters} from 'vuex'
  import Cell from '@components/cell'
  export default {
    components: {
      gogaHeader,
      Icon,
      Cell
    },
    data() {
      return {
        orderId: '',
        price: '0',
        balance: 0,
        payIndex: 0,
        isWechat: false,
        openID: '',
        btnDisabled: false,
        loading: false
      }
    },
    async mounted() {
      let orderId = this.orderId = this.$route.params.orderId;
      this.isWechat = isWechat();
      await this.getBalance();
      await this.getPayInfo();
      if(isWechat()) {
        wechatConfig();
      }

    },
    computed: {
      ...mapGetters({
        isLogin: 'global/user/isLogin'
      })
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      async getBalance () {
        this.$store.dispatch('global/user/log');
        let {data: {uMoney,StatusCode}} =  await api.get('api/v1/UserInfo/userMoney.ashx')
        if (StatusCode=='200') {
          this.balance = uMoney
        }
      },
      async getPayInfo () {
        let {data: {StatusCode, oMoney}} = await api.post('api/v1/Order/orderPayInfo.ashx', {OrderSn: this.orderId})
        if (StatusCode=='200') {
          this.price = oMoney
        }
      },
      choose: function (index) {
        console.log(index)
        if (this.payIndex === index) {
          this.payIndex = 0
        } else {
          this.payIndex = index
        }
      },
      pay: function () {
        if (this.payIndex === 0) {
          this.balancePay()
        } else if (this.payIndex === 2) {
          this.jsApiCall()
        } else if (this.payIndex === 1) {
          this.jsAliPay()
        }
      },
      async balancePay () {
        this.btnDisabled = true;
        this.loading = true;
        let {data: {StatusCode, Status}} = await api.post('api/v1/Order/uMoneyPay.ashx', {orderSn: this.orderId});
        if (StatusCode === '200') {
          this.$route.push({name: 'paySuccess', params: {orderID: self.orderID}})
        } else {
          this.$store.dispatch('global/toast', Status);
        }
        this.btnDisabled = false
        this.loading = false
      },
      async jsApiCall () {
        let self = this
        this.btnDisabled = true
        this.loading = true;
        let {data} = await api.get('api/v1/Wx/chooseWXPay.ashx', {orderSn: this.orderId})
        window.wx.chooseWXPay({
          timestamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: data.signType,
          paySign: data.paySign,
          success: function (res) {
            self.$route.push({name: 'paySuccess', params: {orderID: self.orderID}})
          },
          cancel: function () {
            self.btnDisabled = false
            self.loading = false;
          }
        })
      },
      jsAliPay: function () {
        window.location.href = 'https://shop.gogagoga.cc/wapAlipay/pay.aspx?orderSn=' + this.orderId + '&token=' + cookie('TOKEN')
      }
    }
  }
</script>
<style lang="less">
  @import "index.less";
</style>
